<template style="background: #f5f6fa">
  <div class="typical-home" ref="portaletDiv">
    <!-- rgb(255, 111, 14) 业绩目标 #5ab2fb 拨打电话 #fe4530 跟进客户 #6ad6b8
    客户上门 #5ab2fb 新增进件 #60d1eb 回款金额 -->

    <a-row :gutter="[8, 8]">
      <!-- 顶部列表 -->
      <a-col :span="17" class="module-list">
        <a-row v-hasPermi="['biz:showindexData:query']">
          <a-col :span="24">
            <a-card>
              <a-row :gutter="[20, 20]" style="padding: 20px 20px 0px 20px">
                <a-col :span="14">
                  <h3>数据简报</h3>
                </a-col>
                <a-col :span="4">
                  <a-tree-select
                    v-model="deptId"
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="deptOptions"
                    placeholder="请选择"
                    :replaceFields="{
                      children: 'children',
                      title: 'menuName',
                      key: 'id',
                      value: 'id',
                    }"
                    @change="onMenuTreeChange"
                  >
                  </a-tree-select>
                </a-col>
                <a-col :span="4">
                  <a-select
                    placeholder="请选择客户经理"
                    v-model="userId"
                    style="width: 100%"
                    allow-clear
                    @change="onUserChange"
                  >
                    <a-select-option
                      v-for="d in userNamesList"
                      :key="d.name"
                      :value="d.id"
                      >{{ d.name }}</a-select-option
                    >
                  </a-select>
                </a-col>
                <a-col :span="2">
                  <a-popover
                    title=""
                    placement="bottom"
                    trigger="click"
                    :visible="dataDateclicked"
                    @visibleChange="handleClickChangeDataDate"
                  >
                    <template slot="content">
                      <a-row style="width: 380px">
                        <a-col :span="5">按类型时间</a-col>
                        <a-col :span="24">
                          <a-row style="margin-top: 10px">
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('toDay', '今日')"
                                >今日</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('tomorrow', '昨日')"
                                >昨日</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('toWeek', '本周')"
                                >本周</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                :size="dateButtonType"
                                @click="changePaiHangDate('toMonth', '本月')"
                                >本月</a-button
                              ></a-col
                            >
                            <a-span :span="3"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('lastMonth', '上月')"
                                >上月</a-button
                              ></a-span
                            >
                          </a-row>
                          <a-row style="margin-top: 10px">
                            <a-col :span="3" style="margin-right: 25px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="
                                  changePaiHangDate('toQuarter', '本季度')
                                "
                                >本季度</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 25px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="
                                  changePaiHangDate('lastQuarter', '上季度')
                                "
                                >上季度</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 20px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('toYear', '今年')"
                                >今年</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 20px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('lastYear', '去年')"
                                >去年</a-button
                              ></a-col
                            >
                          </a-row>
                          <a-col :span="5" style="margin-top: 10px"
                            >自定义时间</a-col
                          >
                          <a-col :span="24" style="margin-top: 10px">
                            <a-range-picker
                              style="width: 100%"
                              v-model="dateRange"
                              valueFormat="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              allow-clear
                            />
                          </a-col>
                          <a-col
                            :span="24"
                            style="text-align: right; margin-top: 10px"
                          >
                            <a-button
                              type="primary"
                              @click="checkchangeDataDate"
                              >确认</a-button
                            >
                          </a-col>
                        </a-col>
                      </a-row>
                    </template>
                    <a-button>{{ dataDateText }}</a-button>
                  </a-popover>
                </a-col>
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 0px 20px">
                <a-col :span="8">
                  <a-card class="shujianbaocardbg">
                    <a-row style="padding: 18px 15px">
                      <a-col :span="4"
                        ><img
                          src="@/assets/img/index/shujujianbao/newxiansuo.png"
                      /></a-col>
                      <a-col :span="14">
                        <a-row>
                          <a-col :span="24"
                            ><span class="shujianbaocounts">{{
                              indexData.ggCustomer
                            }}</span></a-col
                          >
                          <a-col :span="24"
                            ><span class="shujianbaomiaosu"
                              >新增线索（个）</span
                            ></a-col
                          >
                        </a-row>
                      </a-col>
                      <a-col :span="6">
                        <a-row>
                          <a-col :span="24"
                            ><span class="shujianbaohuanbi">环比</span></a-col
                          >
                          <a-col :span="24">
                            <span class="shujianbaohuanbishu">
                              <a-icon
                                type="arrow-down"
                                style="color: green"
                                v-if="
                                  indexData.ggCustomer -
                                    indexData.hbggCustomer <
                                  0
                                "
                              />
                              <a-icon
                                type="arrow-up"
                                style="color: red"
                                v-else
                              />{{
                                indexData.ggCustomer - indexData.hbggCustomer
                              }}</span
                            ></a-col
                          >
                        </a-row>
                      </a-col>
                    </a-row>
                  </a-card>
                </a-col>
                <a-col :span="8">
                  <a-card class="shujianbaocardbg">
                    <a-row style="padding: 18px 15px">
                      <a-col :span="4"
                        ><img
                          src="@/assets/img/index/shujujianbao/newcustomer.png"
                      /></a-col>
                      <a-col :span="14"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaocounts">{{
                              indexData.newCustomer
                            }}</span></a-col
                          >
                          <a-col :span="24"
                            ><span class="shujianbaomiaosu"
                              >新增客户（个）</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                      <a-col :span="6"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaohuanbi">环比</span></a-col
                          >
                          <a-col :span="24">
                            <span class="shujianbaohuanbishu">
                              <a-icon
                                type="arrow-down"
                                style="color: green"
                                v-if="
                                  indexData.newCustomer -
                                    indexData.hbnewCustomer <
                                  0
                                "
                              />
                              <a-icon
                                type="arrow-up"
                                style="color: red"
                                v-else
                              />{{
                                indexData.newCustomer - indexData.hbnewCustomer
                              }}</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                    </a-row>
                  </a-card></a-col
                >
                <a-col :span="8">
                  <a-card class="shujianbaocardbg">
                    <a-row style="padding: 18px 15px">
                      <a-col :span="4"
                        ><img src="@/assets/img/index/shujujianbao/newcall.png"
                      /></a-col>
                      <a-col :span="14"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaocounts">{{
                              indexData.newCallCustomer
                            }}</span></a-col
                          >
                          <a-col :span="24"
                            ><span class="shujianbaomiaosu"
                              >新增拨打电话（个）</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                      <a-col :span="6"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaohuanbi">环比</span></a-col
                          >
                          <a-col :span="24">
                            <span class="shujianbaohuanbishu">
                              <a-icon
                                type="arrow-down"
                                style="color: green"
                                v-if="
                                  indexData.newCallCustomer -
                                    indexData.hbnewCallCustomer <
                                  0
                                "
                              />
                              <a-icon
                                type="arrow-up"
                                style="color: red"
                                v-else
                              />{{
                                indexData.newCallCustomer -
                                indexData.hbnewCallCustomer
                              }}</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                    </a-row>
                  </a-card></a-col
                >
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 0px 20px">
                <a-col :span="8">
                  <a-card class="shujianbaocardbg">
                    <a-row style="padding: 18px 15px">
                      <a-col :span="4"
                        ><img
                          src="@/assets/img/index/shujujianbao/newgenjin.png"
                      /></a-col>
                      <a-col :span="14"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaocounts">{{
                              indexData.newGenjin
                            }}</span></a-col
                          >
                          <a-col :span="24"
                            ><span class="shujianbaomiaosu"
                              >新增跟进记录（条）</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                      <a-col :span="6"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaohuanbi">环比</span></a-col
                          >
                          <a-col :span="24">
                            <span class="shujianbaohuanbishu">
                              <a-icon
                                type="arrow-down"
                                style="color: green"
                                v-if="
                                  indexData.newGenjin - indexData.hbnewGenjin <
                                  0
                                "
                              />
                              <a-icon
                                type="arrow-up"
                                style="color: red"
                                v-else
                              />{{
                                indexData.newGenjin - indexData.hbnewGenjin
                              }}</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                    </a-row>
                  </a-card>
                </a-col>
                <a-col :span="8">
                  <a-card class="shujianbaocardbg">
                    <a-row style="padding: 18px 15px">
                      <a-col :span="4"
                        ><img
                          src="@/assets/img/index/shujujianbao/newshangmen.png"
                      /></a-col>
                      <a-col :span="14"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaocounts">{{
                              indexData.newYaoyueShangmen
                            }}</span></a-col
                          >
                          <a-col :span="24"
                            ><span class="shujianbaomiaosu"
                              >新增邀约上门（次）</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                      <a-col :span="6"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaohuanbi">环比</span></a-col
                          >
                          <a-col :span="24">
                            <span class="shujianbaohuanbishu">
                              <a-icon
                                type="arrow-down"
                                style="color: green"
                                v-if="
                                  indexData.newYaoyueShangmen -
                                    indexData.hbnewYaoyueShangmen <
                                  0
                                "
                              />
                              <a-icon
                                type="arrow-up"
                                style="color: red"
                                v-else
                              />{{
                                indexData.newYaoyueShangmen -
                                indexData.hbnewYaoyueShangmen
                              }}</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                    </a-row>
                  </a-card></a-col
                >
                <a-col :span="8">
                  <a-card class="shujianbaocardbg">
                    <a-row style="padding: 18px 15px">
                      <a-col :span="4"
                        ><img
                          src="@/assets/img/index/shujujianbao/yaoyueshangmen.png"
                      /></a-col>
                      <a-col :span="14"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaocounts">{{
                              indexData.newShangmen
                            }}</span></a-col
                          >
                          <a-col :span="24"
                            ><span class="shujianbaomiaosu"
                              >新增客户上门（个）</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                      <a-col :span="6"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaohuanbi">环比</span></a-col
                          >
                          <a-col :span="24">
                            <span class="shujianbaohuanbishu">
                              <a-icon
                                type="arrow-down"
                                style="color: green"
                                v-if="
                                  indexData.newShangmen -
                                    indexData.hbnewShangmen <
                                  0
                                "
                              />
                              <a-icon
                                type="arrow-up"
                                style="color: red"
                                v-else
                              />{{
                                indexData.newShangmen - indexData.hbnewShangmen
                              }}</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                    </a-row>
                  </a-card></a-col
                >
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 0px 20px 20px 20px">
                <a-col :span="8">
                  <a-card class="shujianbaocardbg">
                    <a-row style="padding: 18px 15px">
                      <a-col :span="4"
                        ><img
                          src="@/assets/img/index/shujujianbao/newjinjian.png"
                      /></a-col>
                      <a-col :span="14"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaocounts">{{
                              indexData.newJinjian
                            }}</span></a-col
                          >
                          <a-col :span="24"
                            ><span class="shujianbaomiaosu"
                              >新增进件（笔）</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                      <a-col :span="6"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaohuanbi">环比</span></a-col
                          >
                          <a-col :span="24">
                            <span class="shujianbaohuanbishu">
                              <a-icon
                                type="arrow-down"
                                style="color: green"
                                v-if="
                                  indexData.newJinjian -
                                    indexData.hbnewJinjian <
                                  0
                                "
                              />
                              <a-icon
                                type="arrow-up"
                                style="color: red"
                                v-else
                              />{{
                                indexData.newJinjian - indexData.hbnewJinjian
                              }}</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                    </a-row>
                  </a-card>
                </a-col>
                <a-col :span="8">
                  <a-card class="shujianbaocardbg">
                    <a-row style="padding: 18px 15px">
                      <a-col :span="4"
                        ><img
                          src="@/assets/img/index/shujujianbao/newhuikuan.png"
                      /></a-col>
                      <a-col :span="14"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaocounts">{{
                              indexData.newHuikuan
                            }}</span></a-col
                          >
                          <a-col :span="24"
                            ><span class="shujianbaomiaosu"
                              >新增回款（笔）</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                      <a-col :span="6"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaohuanbi">环比</span></a-col
                          >
                          <a-col :span="24">
                            <span class="shujianbaohuanbishu">
                              <a-icon
                                type="arrow-down"
                                style="color: green"
                                v-if="
                                  indexData.newHuikuan - indexData.hbHuikuan < 0
                                "
                              />
                              <a-icon
                                type="arrow-up"
                                style="color: red"
                                v-else
                              />{{
                                indexData.newHuikuan - indexData.hbHuikuan
                              }}</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                    </a-row>
                  </a-card></a-col
                >
                <a-col :span="8">
                  <a-card class="shujianbaocardbg">
                    <a-row style="padding: 18px 15px">
                      <a-col :span="4"
                        ><img src="@/assets/img/index/shujujianbao/huikuan.png"
                      /></a-col>
                      <a-col :span="14"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaocounts">{{
                              indexData.newHuikuanAmount || 0
                            }}</span></a-col
                          >
                          <a-col :span="24"
                            ><span class="shujianbaomiaosu"
                              >回款金额（元）</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                      <a-col :span="6"
                        ><a-row>
                          <a-col :span="24"
                            ><span class="shujianbaohuanbi">环比</span></a-col
                          >
                          <a-col :span="24">
                            <span class="shujianbaohuanbishu">
                              <a-icon
                                type="arrow-down"
                                style="color: green"
                                v-if="
                                  indexData.newHuikuanAmount -
                                    indexData.hbHuikuanAmount <
                                  0
                                "
                              />
                              <a-icon
                                type="arrow-up"
                                style="color: red"
                                v-else
                              />{{
                                indexData.newHuikuanAmount -
                                indexData.hbHuikuanAmount
                                  ? indexData.hbHuikuanAmount
                                  : 0
                              }}</span
                            ></a-col
                          >
                        </a-row></a-col
                      >
                    </a-row>
                  </a-card></a-col
                >
              </a-row>
            </a-card>
          </a-col>
        </a-row>
        <a-row style="margin-top: 8px">
          <a-col :span="24">
            <a-card>
              <a-row :gutter="[20, 20]" style="padding: 20px 20px 0px 20px">
                <a-col :span="20">
                  <h3>业绩目标</h3>
                </a-col>

                <a-col :span="4">
                  <a-radio-group
                    v-model="kpiType"
                    button-style="solid"
                    @change="changeKpiType"
                  >
                    <a-radio-button value="day"> 日 </a-radio-button>
                    <a-radio-button value="week"> 周 </a-radio-button>
                    <a-radio-button value="month"> 月 </a-radio-button>
                  </a-radio-group>
                </a-col>
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 0px 20px 20px 20px">
                <a-col :span="8" style="text-align: center">
                  <div class="yemubiaotitle">新增客户</div>
                  <div
                    style="
                      height: 200px;
                      width: 200px;
                      margin-left: 25%;
                      margin-top: -30px;
                    "
                    id="addDataShow"
                  ></div>
                  <div style="margin-top: -30px">
                    <span class="yemubiaotext">{{
                      getDeptTargetModel.addCus || 0
                    }}</span
                    >&nbsp;&nbsp;/任务{{ deptTargetModel.addCus || 0 }}位
                  </div>
                </a-col>
                <a-col :span="8" style="text-align: center">
                  <div class="yemubiaotitle">拨打电话</div>
                  <div
                    style="
                      height: 200px;
                      width: 200px;
                      margin-left: 25%;
                      margin-top: -30px;
                    "
                    id="addCallShow"
                  ></div>
                  <div style="margin-top: -30px">
                    <span class="yemubiaotext">{{
                      getDeptTargetModel.calls || 0
                    }}</span
                    >&nbsp;&nbsp;/任务{{ deptTargetModel.calls || 0 }}次
                  </div>
                </a-col>
                <a-col :span="8" style="text-align: center">
                  <div class="yemubiaotitle">跟进客户</div>
                  <div
                    style="
                      height: 200px;
                      width: 200px;
                      margin-left: 25%;
                      margin-top: -30px;
                    "
                    id="addGenjinShow"
                  ></div>
                  <div style="margin-top: -30px">
                    <span class="yemubiaotext">{{
                      getDeptTargetModel.genjins || 0
                    }}</span
                    >&nbsp;&nbsp;/任务{{ deptTargetModel.genjins || 0 }}次
                  </div>
                </a-col>
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 0px 20px 20px 20px">
                <a-col :span="8" style="text-align: center">
                  <div class="yemubiaotitle">上门客户</div>
                  <div
                    style="
                      height: 200px;
                      width: 200px;
                      margin-left: 25%;
                      margin-top: -30px;
                    "
                    id="addShangmenShow"
                  ></div>
                  <div style="margin-top: -30px">
                    <span class="yemubiaotext">{{
                      getDeptTargetModel.gohome || 0
                    }}</span
                    >&nbsp;&nbsp;/任务{{ deptTargetModel.gohome || 0 }}位
                  </div>
                </a-col>
                <a-col :span="8" style="text-align: center">
                  <div class="yemubiaotitle">新增进件</div>
                  <div
                    style="
                      height: 200px;
                      width: 200px;
                      margin-left: 25%;
                      margin-top: -30px;
                    "
                    id="addJinjianShow"
                  ></div>
                  <div style="margin-top: -30px">
                    <span class="yemubiaotext">{{
                      getDeptTargetModel.jinjians || 0
                    }}</span
                    >&nbsp;&nbsp;/任务{{ deptTargetModel.jinjians || 0 }}笔
                  </div>
                </a-col>
                <a-col :span="8" style="text-align: center">
                  <div class="yemubiaotitle">回款金额</div>
                  <div
                    style="
                      height: 200px;
                      width: 200px;
                      margin-left: 25%;
                      margin-top: -30px;
                    "
                    id="addHuikuanShow"
                  ></div>
                  <div style="margin-top: -30px">
                    <span class="yemubiaotext">{{
                      getDeptTargetModel.shouru || 0
                    }}</span
                    >&nbsp;&nbsp;/任务{{ deptTargetModel.shouru || 0 }}（元）
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="7" class="module-list">
        <a-row>
          <a-col :span="24">
            <a-card>
              <a-row :gutter="[20, 20]" style="padding: 20px">
                <a-col :span="24">
                  <h3>快捷操作</h3>
                </a-col>
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 0px 20px 20px 20px">
                <a-col
                  :span="8"
                  style="text-align: center"
                  @click="handleToPathMyCustomer"
                  class="mhover"
                >
                  <img src="@/assets/img/index/kuaijiecaozuo/newcustomer.png" />
                  <div>新增客户</div>
                </a-col>
                <a-col
                  :span="8"
                  style="text-align: center"
                  @click="handleToPathjinjian"
                  class="mhover"
                >
                  <img
                    src="@/assets/img/index/kuaijiecaozuo/jinjianshenqin.png"
                  />
                  <div>贷款计算器</div>
                </a-col>
                <a-col
                  :span="8"
                  style="text-align: center"
                  @click="handleToPathMyCustomer"
                  class="mhover"
                >
                  <img src="@/assets/img/index/kuaijiecaozuo/newgenjin.png" />
                  <div>写新跟进</div>
                </a-col>
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 0px 20px 40px 20px">
                <a-col :span="8" style="text-align: center">
                  <img
                    src="@/assets/img/index/kuaijiecaozuo/todaygenjincustomer.png"
                  />
                  <div>今日待跟进客户</div>
                  <div style="color: #999">
                    {{ daiwanchengData.genjinCounts }}位客户
                  </div>
                </a-col>
                <a-col :span="8" style="text-align: center">
                  <img src="@/assets/img/index/kuaijiecaozuo/newcustomer.png" />
                  <div>今日预约上门客户</div>
                  <div style="color: #999">
                    {{ daiwanchengData.shangmenCounts }}位客户
                  </div>
                </a-col>
                <a-col :span="8" style="text-align: center">
                  <img src="@/assets/img/index/kuaijiecaozuo/newcustomer.png" />
                  <div>今日还款客户</div>
                  <div style="color: #999">0位客户</div>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
        <a-row style="margin-top: 8px" v-hasPermi="['biz:showindexData:query']">
          <a-col :span="24">
            <a-card>
              <a-row style="padding: 20px 20px 0px 20px">
                <a-col :span="12">
                  <h3>回款排行榜</h3>
                </a-col>
                <a-col :span="4">
                  <a-popover
                    title=""
                    placement="bottom"
                    trigger="click"
                    :visible="paihangclicked"
                    @visibleChange="handleClickChangePaiHangDate"
                  >
                    <template slot="content">
                      <a-row style="width: 380px">
                        <a-col :span="5">按类型时间</a-col>
                        <a-col :span="24">
                          <a-row style="margin-top: 10px">
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('toDay', '今日')"
                                >今日</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('tomorrow', '昨日')"
                                >昨日</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('toWeek', '本周')"
                                >本周</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                :size="dateButtonType"
                                @click="changePaiHangDate('toMonth', '本月')"
                                >本月</a-button
                              ></a-col
                            >
                            <a-span :span="3"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('lastMonth', '上月')"
                                >上月</a-button
                              ></a-span
                            >
                          </a-row>
                          <a-row style="margin-top: 10px">
                            <a-col :span="3" style="margin-right: 25px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="
                                  changePaiHangDate('toQuarter', '本季度')
                                "
                                >本季度</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 25px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="
                                  changePaiHangDate('lastQuarter', '上季度')
                                "
                                >上季度</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 20px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('toYear', '今年')"
                                >今年</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 20px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('lastYear', '去年')"
                                >去年</a-button
                              ></a-col
                            >
                          </a-row>
                          <a-col
                            :span="24"
                            style="text-align: right; margin-top: 10px"
                          >
                            <a-button
                              type="primary"
                              @click="checkchangePaiHangDate"
                              >确认</a-button
                            >
                          </a-col>
                        </a-col>
                      </a-row>
                    </template>
                    <a-button style="">{{ paihangDateText }}</a-button>
                  </a-popover>
                </a-col>
                <a-col :span="8">
                  <a-radio-group v-model="paihangType" button-style="solid">
                    <a-radio-button value="a"> 个人 </a-radio-button>
                    <a-radio-button value="b"> 部门 </a-radio-button>
                  </a-radio-group>
                </a-col>
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 20px 20px 40px 20px">
                <a-table
                  rowKey="userName"
                  :columns="paihangcolumns"
                  :data-source="paihangdataself"
                  size="middle"
                  :pagination="false"
                  :locale="{ emptyText: '暂无排行数据' }"
                  v-if="paihangType == 'a'"
                  :customRow="handleCustomRow"
                >
                  <span slot="rowIndex" slot-scope="text, record">
                    <img
                      v-if="record.rowIndex == 1"
                      src="@/assets/img/index/paihangbang/1.png"
                    />
                    <img
                      v-else-if="record.rowIndex == 2"
                      src="@/assets/img/index/paihangbang/2.png"
                    />
                    <img
                      v-else-if="record.rowIndex == 3"
                      src="@/assets/img/index/paihangbang/3.png"
                    />
                    <span v-else> {{ record.rowIndex }}</span>
                  </span>
                </a-table>
                <a-table
                  rowKey="deptName"
                  :columns="paihangdeptcolumns"
                  :data-source="paihangdatadept"
                  size="middle"
                  :pagination="false"
                  :locale="{ emptyText: '暂无排行数据' }"
                  v-if="paihangType == 'b'"
                  :customRow="handleCustomRow"
                >
                  <span slot="rowIndex" slot-scope="text, record">
                    <img
                      v-if="record.rowIndex == 1"
                      src="@/assets/img/index/paihangbang/1.png"
                    />
                    <img
                      v-else-if="record.rowIndex == 2"
                      src="@/assets/img/index/paihangbang/2.png"
                    />
                    <img
                      v-else-if="record.rowIndex == 3"
                      src="@/assets/img/index/paihangbang/3.png"
                    />
                    <span v-else> {{ record.rowIndex }}</span>
                  </span>
                </a-table>
              </a-row>
              <!-- <a-button type="" @click="TestWebS">Test</a-button>
              <a-button type="" @click="TestWebS2">Test2</a-button> -->
            </a-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-modal
      :visible="CalculatorModalVisible"
      title="贷款计算器"
      v-if="CalculatorModalVisible"
      width="50%"
      @ok="CalculatorModalVisible = false"
      @cancel="CalculatorModalVisible = false"
      :dialog-style="{ top: '10px' }"
      style="height: 10vh"
    >
      <CalculatorModal />
    </a-modal>
    <!-- 修改密码抽屉 -->
    <add-customer-info-form
      v-if="showAddInfoModal"
      ref="AddCustomerInfoForm"
      @close="showAddInfoModal = false"
    />
  </div>
</template>

<script>
import {
  indexDataJianBao,
  indexPaiHangBangSelf,
  indexPaiHangBangDept,
  indexDaiCaoZuo,
} from "@/api/biz/bizJinjianBill";
import { getIndexTarGetInfo } from "@/api/biz/bizDeptTarget";
import { listDeptTree } from "@/api/system/dept";
import { testWebSocket, testWebSocket2 } from "@/api/biz/bizCustomer";
import CalculatorModal from "@/views/dashboard/portal/CalculatorModal";
import { mapGetters } from "vuex";
import AddCustomerInfoForm from "@/views/dashboard/portal/moudles/AddCustomerInfoForm";
import { listUser } from "@/api/system/user";
export default {
  components: {
    CalculatorModal,
    AddCustomerInfoForm,
  },
  data() {
    return {
      CalculatorModalVisible: false,
      showAddInfoModal: false,
      // 月度新增标题
      monthTitle: "",
      // 总计标题
      allTitle: "",
      // 总计占比标题
      allStaTitle: "",
      // 总计年度标题
      yearTtile: "",
      visible: false,
      data: [],
      monthData: [],
      fromOptions: [],
      staOptions: [],
      dateFormat: "YYYY-MM-DD",
      compile: false,
      len: [],
      paihangType: "a",
      paihangDate: "toMonth",
      paihangDateText: "本月",
      dataDate: "toMonth",
      dataDateText: "本月",
      changeDate: "",
      changeDateText: "",
      paihangclicked: false,
      dataDateclicked: false,
      dateRange: [],
      deptId: [],
      // 待完成
      daiwanchengData: { genjinCounts: 0, shangmenCounts: 0 },
      paihangcolumns: [
        {
          title: "排名",
          align: "center",
          dataIndex: "rowIndex",
          key: "rowIndex",
          width: "20%",
          scopedSlots: { customRender: "rowIndex" },
        },
        {
          title: "姓名",
          dataIndex: "userName",
          align: "center",
          width: "25%",
        },
        {
          title: "部门",
          dataIndex: "deptName",
          align: "center",
          width: "25%",
        },
        {
          title: "回款金额(元)",
          dataIndex: "checkHuikuan",
          align: "center",
          width: "30%",
        },
      ],
      paihangdeptcolumns: [
        {
          title: "排名",
          align: "center",
          dataIndex: "rowIndex",
          key: "rowIndex",
          width: "25%",
          scopedSlots: { customRender: "rowIndex" },
        },

        {
          title: "部门",
          dataIndex: "deptName",
          align: "center",
          width: "35%",
        },
        {
          title: "回款金额(元)",
          dataIndex: "checkHuikuan",
          align: "center",
          width: "40%",
        },
      ],
      dateButtonType: "large",
      paihangdataself: [],
      paihangdatadept: [],
      selectMoth: undefined,
      // 卡片加载
      listLoading: false,
      // 总数卡片
      cardLoading: false,
      indexData: [],
      allMonthStudent: {
        createTime: undefined,
      },
      allStudent: {
        createTime: undefined,
      },
      student: {
        createTime: undefined,
      },
      studenter: {
        createTime: undefined,
      },
      option: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [],
      },
      deptOptions: [],
      getDeptTarget: [],
      deptTarget: [],
      busTypeOptions: [],
      carStatusOptions: [],
      statusOptions: [],
      typeOptions: [],
      userNamesList: [],
      isKefu: 2,
      // 根据岗位删选员工
      postIds: ["gwzg", "rzgw", "qyjl", "sg"],
      userId: null,
      kpiType: "month",
      getDeptTargetModel: {
        calls: 0,
        addCus: 0,
        genjins: 0,
        gohome: 0,
        jinjians: 0,
        shouru: 0,
      },
      deptTargetModel: {
        calls: 0,
        addCus: 0,
        genjins: 0,
        gohome: 0,
        jinjians: 0,
        shouru: 0,
      },
      myChart: null,
      shangmenChart: null,
      huikuanChart: null,
      myCallChart: null,
      myChart5: null,
      myChart6: null,
    };
  },
  created() {
    // setTimeout(this.addDataShow(), 1000);
    this.handleIndexDataJianBao();
    this.handleindexPaiHangBangDept(this.dataDate);
    this.handleindexPaiHangBangSelf(this.dataDate);
    this.getDeptList();
    this.handleGetCaoZuoDaiwan();
  },
  watch: {},
  mounted() {
    this.handleGetIndexTarGetInfo();
  },
  computed: {
    ...mapGetters(["company"]),
  },
  methods: {
    handleCustomRow(record) {
      if (record.isCurrent === 1) {
        return {
          style: {
            "background-color": "#ffebee", // 设置背景色
          },
        };
      }
      return {};
    },
    changeKpiType() {
      this.handleGetIndexTarGetInfo();
    },

    freshDeptTargetCharts() {
      this.getDeptTargetModel.calls = this.getDeptTarget.mCalls;
      this.getDeptTargetModel.addCus = this.getDeptTarget.mAddCus;
      this.getDeptTargetModel.genjins = this.getDeptTarget.mGenjins;
      this.getDeptTargetModel.gohome = this.getDeptTarget.mGohome;
      this.getDeptTargetModel.jinjians = this.getDeptTarget.mJinjians;
      this.getDeptTargetModel.shouru = this.getDeptTarget.mShouru;
      switch (this.kpiType) {
        case "day":
          // this.getDeptTargetModel.calls = this.getDeptTarget.dCalls;
          // this.getDeptTargetModel.addCus = this.getDeptTarget.dAddCus;
          // this.getDeptTargetModel.genjins = this.getDeptTarget.dGenjins;
          // this.getDeptTargetModel.gohome = this.getDeptTarget.dGohome;
          // this.getDeptTargetModel.jinjians = this.getDeptTarget.dJinjians;
          // this.getDeptTargetModel.shouru = this.getDeptTarget.dShouru;

          this.deptTargetModel.calls = this.deptTarget.dCalls;
          this.deptTargetModel.addCus = this.deptTarget.dAddCus;
          this.deptTargetModel.genjins = this.deptTarget.dGenjins;
          this.deptTargetModel.gohome = this.deptTarget.dGohome;
          this.deptTargetModel.jinjians = this.deptTarget.dJinjians;
          this.deptTargetModel.shouru = this.deptTarget.dShouru;
          break;
        case "week":
          // this.getDeptTargetModel.calls = this.getDeptTarget.wCalls;
          // this.getDeptTargetModel.addCus = this.getDeptTarget.wAddCus;
          // this.getDeptTargetModel.genjins = this.getDeptTarget.wGenjins;
          // this.getDeptTargetModel.gohome = this.getDeptTarget.wGohome;
          // this.getDeptTargetModel.jinjians = this.getDeptTarget.wJinjians;
          // this.getDeptTargetModel.shouru = this.getDeptTarget.wShouru;

          this.deptTargetModel.calls = this.deptTarget.wCalls;
          this.deptTargetModel.addCus = this.deptTarget.wAddCus;
          this.deptTargetModel.genjins = this.deptTarget.wGenjins;
          this.deptTargetModel.gohome = this.deptTarget.wGohome;
          this.deptTargetModel.jinjians = this.deptTarget.wJinjians;
          this.deptTargetModel.shouru = this.deptTarget.wShouru;
          break;
        case "month":
          this.deptTargetModel.calls = this.deptTarget.mCalls;
          this.deptTargetModel.addCus = this.deptTarget.mAddCus;
          this.deptTargetModel.genjins = this.deptTarget.mGenjins;
          this.deptTargetModel.gohome = this.deptTarget.mGohome;
          this.deptTargetModel.jinjians = this.deptTarget.mJinjians;
          this.deptTargetModel.shouru = this.deptTarget.mShouru;
          break;
        default:
          break;
      }
      this.addDataShow();
      this.addCallShow();
      this.addGenjinShow();
    },
    getUserList(deptId) {
      if (!deptId) {
        this.userId = null;
        this.userNamesList = [];
        return;
      }
      const params = {
        pageNum: 1,
        pageSize: 100,
        deptId: deptId,
      };
      if (this.isKefu) {
        params.isKefu = this.isKefu;
      }
      if (this.postIds) {
        params.postIds = this.postIds;
      }
      listUser(params).then((res) => {
        this.userNamesList = res.data.list;
      });
    },

    handleGetIndexTarGetInfo() {
      var param = {
        deptId: this.deptId,
        userId: this.userId,
        kpiType: this.kpiType,
      };
      getIndexTarGetInfo(param).then((res) => {
        this.getDeptTarget = res.data.getDeptTarget;
        this.deptTarget = res.data.deptTarget;
        this.freshDeptTargetCharts();
      });
    },
    TestWebS() {
      testWebSocket().then((res) => {
        // this.$message.success(res.msg);
      });
    },
    TestWebS2() {
      testWebSocket2().then((res) => {
        // this.$message.success(res.msg);
      });
    },
    handleToPathMyCustomer() {
      // this.$router.push({
      //   path: "/biz/customer/myindex",
      // });

      this.showAddInfoModal = true;
      this.$nextTick(() => this.$refs.AddCustomerInfoForm.handleShowModal());
    },
    handleToPathjinjian() {
      // this.$router.push({
      //   path: "/biz/jinjianinfo/yushenindex",
      // });
      this.CalculatorModalVisible = true;
    },
    handleGetCaoZuoDaiwan() {
      indexDaiCaoZuo().then((res) => {
        this.daiwanchengData = res.data;
      });
    },
    getDeptList() {
      listDeptTree("0", 3, 2, 1).then((response) => {
        this.deptOptions = response.data;
        this.deptId = this.deptOptions[0].id;
        this.getUserList(this.deptId);
      });
    },
    // 排行榜选择时间气泡
    handleClickChangePaiHangDate(visible) {
      this.paihangclicked = visible;
    },
    // 数据简报选择时间气泡
    handleClickChangeDataDate(visible) {
      this.dataDateclicked = visible;
    },
    changePaiHangDate(date, dateText) {
      this.changeDate = date;
      this.chagneDateText = dateText;
      this.dateRange = [];
    },
    checkchangePaiHangDate() {
      this.paihangDate = this.changeDate;
      this.paihangDateText = this.chagneDateText;
      this.paihangclicked = false;
      this.handleindexPaiHangBangSelf(this.changeDate);
      this.handleindexPaiHangBangDept(this.changeDate);
    },
    checkchangeDataDate() {
      this.dataDate = this.changeDate;
      this.dataDateText = this.chagneDateText;
      this.dataDateclicked = false;
      this.handleIndexDataJianBao();
    },
    onMenuTreeChange(value) {
      this.getUserList(value);
      this.handleIndexDataJianBao();
      this.handleGetIndexTarGetInfo();
    },
    onUserChange() {
      this.handleIndexDataJianBao();
      this.handleGetIndexTarGetInfo();
    },
    // 排行榜
    handleindexPaiHangBangSelf(date) {
      var param = { dateText: date };
      indexPaiHangBangSelf(param).then((res) => {
        this.paihangdataself = res.data;
      });
    },
    // 数据简报
    handleindexPaiHangBangDept(date) {
      var param = { dateText: date };
      indexPaiHangBangDept(param).then((res) => {
        this.paihangdatadept = res.data;
      });
    },
    // 数据简报
    handleIndexDataJianBao() {
      var param = {
        dateText: this.dataDate,
        deptId: this.deptId,
        dateRange: this.dateRange,
        userId: this.userId,
      };
      if (this.dateRange.length === 2) {
        // this.dataDateText = this.dateRange[0] + "~" + this.dateRange[1];
        this.dataDateText = "自定义时间";
      }
      indexDataJianBao(param).then((res) => {
        this.indexData = res.data;
      });
    },
    //
    addDataShow() {
      // 初始化或获取图表实例
      if (!this.myChart) {
        this.myChart = this.$echarts.init(
          document.getElementById("addDataShow")
        );
      }

      let newCus = "~";
      if (this.deptTargetModel.addCus) {
        newCus =
          parseFloat(
            (this.getDeptTargetModel.addCus / this.deptTargetModel.addCus) * 100
          ).toFixed(2) || 0;
      }

      const pieConf = {
        title: {
          text: newCus + "%",
          left: "center",
          top: 85,
          textStyle: {
            color: "#1890fe",
          },
        },
        visualMap: {
          show: false,
        },
        series: [
          {
            type: "pie",
            // 环形显示饼状图，实际上显示的是50-80之间的部分
            // 上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
            radius: ["50%", "55%"],
            center: ["50%", "50%"],
            data: [
              // itemSyle是单项的背景颜色设置。
              {
                value:
                  this.deptTargetModel.addCus - this.getDeptTargetModel.addCus,
                itemStyle: { color: "#f1f1f1" },
              },
              {
                value: this.getDeptTargetModel.addCus,
                itemStyle: { color: "#1890fe" },
              },
            ],
            label: {
              // 将视觉引导图关闭
              show: false,
            },
            itemStyle: {
              // 设置的是每项之间的留白
              borderWidth: 0,
              borderColor: "#fff",
            },
            // 初始化echarts的动画效果
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(pieConf, true);

      if (!this.shangmenChart) {
        this.shangmenChart = this.$echarts.init(
          document.getElementById("addShangmenShow")
        );
      }
      let goHome = "~";
      if (this.deptTargetModel.gohome) {
        goHome =
          parseFloat(
            (this.getDeptTargetModel.gohome / this.deptTargetModel.gohome) * 100
          ).toFixed(2) || 0;
      }
      const shangmenpieConf = {
        title: {
          text: goHome + "%",
          left: "center",
          top: 85,
          textStyle: {
            color: "rgb(255, 111, 14)",
          },
        },
        visualMap: {
          show: false,
        },
        series: [
          {
            type: "pie",
            // 环形显示饼状图，实际上显示的是50-80之间的部分
            // 上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
            radius: ["50%", "55%"],
            center: ["50%", "50%"],
            data: [
              // itemSyle是单项的背景颜色设置。
              {
                value:
                  this.deptTargetModel.gohome - this.getDeptTargetModel.gohome,
                itemStyle: { color: "#f1f1f1" },
              },
              {
                value: this.getDeptTargetModel.gohome,
                itemStyle: { color: "rgb(255, 111, 14)" },
              },
            ],
            label: {
              // 将视觉引导图关闭
              show: false,
            },
            itemStyle: {
              // 设置的是每项之间的留白
              borderWidth: 0,
              borderColor: "#fff",
            },
            // 初始化echarts的动画效果
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.shangmenChart.setOption(shangmenpieConf);

      if (!this.jinjianChart) {
        this.jinjianChart = this.$echarts.init(
          document.getElementById("addJinjianShow")
        );
      }
      let jinjians = "~";
      if (this.deptTargetModel.jinjians) {
        jinjians =
          parseFloat(
            (this.getDeptTargetModel.jinjians / this.deptTargetModel.jinjians) *
              100
          ).toFixed(2) || 0;
      }
      const jinjianpieConf = {
        title: {
          text: jinjians + "%",
          left: "center",
          top: 85,
          textStyle: {
            color: "#5ab2fb",
          },
        },
        visualMap: {
          show: false,
        },
        series: [
          {
            type: "pie",
            // 环形显示饼状图，实际上显示的是50-80之间的部分
            // 上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
            radius: ["50%", "55%"],
            center: ["50%", "50%"],
            data: [
              // itemSyle是单项的背景颜色设置。
              {
                value:
                  this.deptTargetModel.jinjians -
                  this.getDeptTargetModel.jinjians,
                itemStyle: { color: "#f1f1f1" },
              },
              {
                value: this.getDeptTargetModel.jinjians,
                itemStyle: { color: "#5ab2fb" },
              },
            ],
            label: {
              // 将视觉引导图关闭
              show: false,
            },
            itemStyle: {
              // 设置的是每项之间的留白
              borderWidth: 0,
              borderColor: "#fff",
            },
            // 初始化echarts的动画效果
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.jinjianChart.setOption(jinjianpieConf);

      if (!this.huikuanChart) {
        this.huikuanChart = this.$echarts.init(
          document.getElementById("addHuikuanShow")
        );
      }
      let shouru = "~";
      if (this.deptTargetModel.shouru) {
        shouru =
          parseFloat(
            (this.getDeptTargetModel.shouru / this.deptTargetModel.shouru) * 100
          ).toFixed(2) || 0;
      }
      const huikuanpieConf = {
        title: {
          text: shouru + "%",
          left: "center",
          top: 85,
          textStyle: {
            color: "#60d1eb",
          },
        },
        visualMap: {
          show: false,
        },
        series: [
          {
            type: "pie",
            // 环形显示饼状图，实际上显示的是50-80之间的部分
            // 上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
            radius: ["50%", "55%"],
            center: ["50%", "50%"],
            data: [
              // itemSyle是单项的背景颜色设置。
              {
                value:
                  this.deptTargetModel.shouru - this.getDeptTargetModel.shouru,
                itemStyle: { color: "#f1f1f1" },
              },
              {
                value: this.getDeptTargetModel.shouru,
                itemStyle: { color: "#60d1eb" },
              },
            ],
            label: {
              // 将视觉引导图关闭
              show: false,
            },
            itemStyle: {
              // 设置的是每项之间的留白
              borderWidth: 0,
              borderColor: "#fff",
            },
            // 初始化echarts的动画效果
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.huikuanChart.setOption(huikuanpieConf);
    },
    addCallShow() {
      if (!this.myCallChart) {
        this.myCallChart = this.$echarts.init(
          document.getElementById("addCallShow")
        );
      }
      let calls = "~";
      if (this.deptTargetModel.calls) {
        calls =
          parseFloat(
            (this.getDeptTargetModel.calls / this.deptTargetModel.calls) * 100
          ).toFixed(2) || 0;
      }
      const pieConf = {
        title: {
          text: calls + "%",
          left: "center",
          top: 85,
          textStyle: {
            color: "#fe4530",
          },
        },
        visualMap: {
          show: false,
        },
        series: [
          {
            type: "pie",
            // 环形显示饼状图，实际上显示的是50-80之间的部分
            // 上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
            radius: ["50%", "55%"],
            center: ["50%", "50%"],
            data: [
              // itemSyle是单项的背景颜色设置。
              {
                value:
                  this.deptTargetModel.calls - this.getDeptTargetModel.calls,
                itemStyle: { color: "#f1f1f1" },
              },
              {
                value: this.getDeptTargetModel.calls,
                itemStyle: { color: "#fe4530" },
              },
            ],
            label: {
              // 将视觉引导图关闭
              show: false,
            },
            itemStyle: {
              // 设置的是每项之间的留白
              borderWidth: 0,
              borderColor: "#fff",
            },
            // 初始化echarts的动画效果
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myCallChart.setOption(pieConf);
    },
    addGenjinShow() {
      if (!this.myGenjinShowChart) {
        this.myGenjinShowChart = this.$echarts.init(
          document.getElementById("addGenjinShow")
        );
      }
      let genjins = "~";
      if (this.deptTargetModel.genjins) {
        genjins =
          parseFloat(
            (this.getDeptTargetModel.genjins / this.deptTargetModel.genjins) *
              100
          ).toFixed(2) || 0;
      }
      const pieConf = {
        title: {
          text: genjins + "%",
          left: "center",
          top: 85,
          textStyle: {
            color: "#6ad6b8",
          },
        },
        visualMap: {
          show: false,
        },
        series: [
          {
            type: "pie",
            // 环形显示饼状图，实际上显示的是50-80之间的部分
            // 上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
            radius: ["50%", "55%"],
            center: ["50%", "50%"],
            data: [
              // itemSyle是单项的背景颜色设置。
              {
                value:
                  this.deptTargetModel.genjins -
                  this.getDeptTargetModel.genjins,
                itemStyle: { color: "#f1f1f1" },
              },
              {
                value: this.getDeptTargetModel.genjins,
                itemStyle: { color: "#6ad6b8" },
              },
            ],
            label: {
              // 将视觉引导图关闭
              show: false,
            },
            itemStyle: {
              // 设置的是每项之间的留白
              borderWidth: 0,
              borderColor: "#fff",
            },
            // 初始化echarts的动画效果
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myGenjinShowChart.setOption(pieConf);
    },
  },
};
</script>
<style lang="less">
@import "../typical-home.less";
</style>
<style>
.yemubiaotext {
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  color: #333;
}
.yemubiaotitle {
  height: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  color: #333;
}
.shujianbaocounts {
  font-size: 17.6px;
  font-family: D-DIN DIN;
  font-weight: 700;
  line-height: 17.6px;
  color: #000;
  -webkit-text-stroke: 1 transparent;
  height: 17.6px;
  opacity: 0.85;
}
.shujianbaomiaosu {
  font-size: 14px;
  font-weight: 400;
  line-height: 11.2px;
  height: 11.2px;
  color: #777;
  -webkit-text-stroke: 1 transparent;
  opacity: 1;
}
.shujianbaohuanbi {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 11.2px;
  height: 11.2px;
  color: #777;
  -webkit-text-stroke: 1 transparent;
  opacity: 1;
}
.shujianbaohuanbishu {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  height: 16px;
  color: #666;
}
.shujianbaocardbg {
  background: hsla(0, 0%, 98%, 0.39);
}
.mhover:hover {
  cursor: hand;
}
.mhover {
  cursor: pointer;
}
</style>
